const bus = new Vue();
window.onload = function () {
    new Vue({
        el: "#app",
        data() {
            return {
                currentIndex: null,
                menuList: [
                    [
                        { href: "#top", title: "首页" },
                        { href: "#wish", title: "使命与愿景" },
                        { href: "#duty", title: "社会责任" },
                        { href: "#culture", title: "企业文化" },
                        { href: "#news", title: "新闻动态" },
                    ],
                    [
                        { href: "#top", title: "关于我们" },
                        { href: "#introduce", title: "企业介绍" },
                        { href: "#company", title: "公司优势" },
                        { href: "#resource", title: "行业优势" },
                        { href: "#client", title: "品牌客户" },
                        { href: "#news", title: "新闻动态" },
                    ],
                    [
                        { href: "#top", title: "产品与服务" },
                        { href: "#science", title: "学科中心" },
                        { href: "#strategy", title: "医学策略" },
                        { href: "#scheme", title: "品牌策划" },
                        { href: "#platform", title: "数智平台" },
                        { href: "#operation", title: "项目运营" },
                        { href: "#news", title: "新闻动态" },
                    ],
                    [
                        { href: "#top", title: "团队介绍" },
                        { href: "#framework", title: "组织架构" },
                        { href: "#staff", title: "员工成长" },
                        { href: "#elegantFemeanour", title: "风采展示" },
                        { href: "#news", title: "新闻动态" },
                    ]
                ],
                topList: [],
                swiper: {
                    home: null,
                    news: null
                },
                moreNews: true,
                newsList: [],
                newsPage: {
                    sort: 0,
                    limit: 6,
                    total: 0
                },
                newDetail: {
                    show: false,
                    text: "",
                    title: ""
                }
            }
        },
        watch: {
            currentIndex: {
                handler(index) {
                    this.$nextTick(function () {
                        const backgroudLogo = document.querySelector(".backgroudLogo");
                        const showIndex = [1, 2, 4];
                        if (!showIndex.includes(parseInt(index))) {
                            backgroudLogo.style.display = "none";
                        }
                    })
                }
            }
        },
        computed: {
            isIOS() {
                return ios;
            }
        },
        created() {
            sendRequest("recommend", {
                pid: 9
            }).then(res => {
                const { success, data } = res;
                if (success && data.banner[0]) document.title = data.banner[0].title;
            })

            this.currentIndex = window.location.search.split("index=")[1] || 0;
            const ids = [1, 4, 5, 6, 7]; // 推荐位id数组，和导航条对应
            sendRequest("recommend", {
                pid: ids[this.currentIndex]
            }).then(res => {
                const { success, data } = res;
                if (success) {
                    data.banner.map(item => {
                        this.topList.push(item.cover_img);
                    })
                }
            })
            this.getNews();
        },
        mounted() {
            this.asideClass();
            this.homeBanner();
            this.newsBanner();
            const newsSwiper = document.querySelector(".newsSwiper");
            newsSwiper.addEventListener("mouseenter", () => {
                this.swiper.news.autoplay.stop();
            });
            newsSwiper.addEventListener("mouseleave", () => {
                this.swiper.news.autoplay.start();
            });
            bus.$on("showImage", obj => {
                this.showImage(obj);
            });
            bus.$on("hideNewDetail", this.hideNewDetail);
        },
        methods: {
            // 侧边栏
            asideClass() {
                const aside = document.querySelector(".c_aside");
                if (aside) {
                    const headerHeight = document.querySelector(".c_header").clientHeight;
                    const bannerHeight = document.querySelector(".banner").clientHeight;
                    const minuend = bannerHeight - headerHeight;
                    if (window.scrollY > (minuend < 0 ? 0 : minuend)) {
                        aside.classList.add("fixed");
                    } else {
                        aside.classList.remove("fixed");
                    }
                }
                window.addEventListener("scroll", this.asideClass);
            },
            // 首页轮播图
            homeBanner() {
                const interleaveOffset = 0.5; //视差比值
                const swiperOptions = {
                    speed: 1000, // 速度
                    autoplay: { // 自动播放
                        disableOnInteraction: false,
                        delay: 3000, // 持续时长
                    },
                    watchSlidesProgress: true,
                    pagination: { // 分页指示器
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    observer: true,
                    observeParents: true,
                    on: {
                        progress: function (swiper) {
                            for (var i = 0; i < swiper.slides.length; i++) {
                                var slideProgress = swiper.slides[i].progress;
                                var innerOffset = swiper.width * interleaveOffset;
                                var innerTranslate = slideProgress * innerOffset;
                                swiper.slides[i].querySelector(".swiper-inner").style.transform = "translate3d(" + innerTranslate + "px, 0, 0)";
                            }
                        },
                        touchStart: function (swiper) {
                            for (var i = 0; i < swiper.slides.length; i++) {
                                swiper.slides[i].style.transition = "";
                            }
                        },
                        setTransition: function (swiper, speed) {
                            for (var i = 0; i < swiper.slides.length; i++) {
                                swiper.slides[i].style.transition = speed + "ms";
                                swiper.slides[i].querySelector(".swiper-inner").style.transition = speed + "ms";
                            }
                        }
                    }
                };
                this.swiper.home = new Swiper(".homeSwiper", swiperOptions);
            },
            // 新闻轮播图
            newsBanner() {
                const swiperOptions = {
                    speed: 1000, // 速度
                    autoplay: { // 自动播放
                        disableOnInteraction: false,
                        delay: 3000, // 持续时长
                    },
                    centeredSlides: true, // 网格布局
                    slidesPerView: 3,// 网格数量
                    spaceBetween: mobile ? 30 : 80,
                    simulateTouch: false,
                    centeredSlidesBounds: true,
                    observer: true,
                    observeParents: true,
                    on: {
                        slideNextTransitionStart: (swiper) => {
                            if (this.moreNews && swiper.activeIndex == this.newsList.length - 3) {
                                this.newsPage.sort += 1;
                                this.getNews();
                            };
                        }
                    }
                };
                this.swiper.news = new Swiper(".newsSwiper", swiperOptions);
            },
            // 新闻轮播图滑动
            newsBannerSlide(funName) {
                this.swiper.news[`slide${funName}`]();
            },
            getNews() {
                let list = new Array;
                sendRequest("list", {
                    cate_id: 3,
                    limit: this.newsPage.limit,
                    sort: this.newsPage.sort
                }).then(res => {
                    const { success, data } = res;
                    if (success) {
                        this.newsPage.total = 10 || data.total;
                        if (this.newsList.length < data.total) {
                            data.list.map(item => {
                                list.push({
                                    image: item.articleInfo.cover_img,
                                    title: item.title,
                                    detail: item.articleInfo.description,
                                    text: item.articleInfo.content
                                })
                            })
                            this.newsList.push(...list);
                        }
                    }
                })
            },
            showImage(obj) {
                const image = this.$refs.c_image;
                image.show = true;
                image.index = obj.index;
                image.list = obj.list;
            },
            showNewDetail(item, index) {
                this.newDetail.show = true;
                this.newDetail.title = item.title;
                this.newDetail.text = item.text;
                window.scrollTo(0, 0);
            },
            hideNewDetail() {
                this.newDetail.show = false;
            }
        }
    });
}